<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" th:href="@{/static/element/index.css}"/>
</head>
<body>
<div id="app">
    <template>
        <el-card style="background-color: #f7f7f7">
            <el-form :model="queryForm" ref="queryForm" :inline="true">
                <el-form-item label="文章分类" prop="categoryName">
                    <el-input clearable size="small" @keyup.enter.native="handleQuery"
                              v-model="queryForm.categoryName" placeholder="菜单名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini"
                               @click="handleQuery">搜索
                    </el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">清空</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-row style="margin-top: 1%">
            <el-col :span="1.5">
                <el-button type="primary" icon="el-icon-plus" size="mini" v-if="button.add"
                           @click="handleAdd">新增
                </el-button>

                <el-button type="warning" icon="el-icon-s-fold" size="mini" @click="expandTable">{{expandName}}
                </el-button>
            </el-col>
        </el-row>


        <el-table v-loading="loading" v-if="refreshTable" :default-expand-all="expandStatus" :data="tableData"
                  row-key="id"
                  :header-cell-style="{'text-align':'center','color':'#303133','font-weight':'600','background-color': '#F5F7FA'}"
                  :cell-style="{'text-align':'center'}" border style="margin-top: 10px">
            <el-table-column prop="categoryName" label="分类名称">
                <template slot-scope="scope">
                    <i :class="scope.row.icon"></i>
                    {{ scope.row.categoryName }}
                </template>

            </el-table-column>
            </el-table-column>
            <el-table-column label="创建时间" align="center" prop="createTime" show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span>{{ scope.row.createTime}}</span>
                </template>
            </el-table-column>
            </el-table-column>
            <el-table-column label="操作" width="300">
                <template slot-scope="scope">
                    <el-button v-if="button.add" size="mini" type="primary" icon="el-icon-plus"
                               @click="handleAdd(scope.row)">新增
                    </el-button>
                    <el-button v-if="button.update" size="mini" type="primary" icon="el-icon-edit"
                               @click="handleUpdate(scope.row)">修改
                    </el-button>
                    <el-button v-if="button.delete" size="mini" type="info" icon="el-icon-delete"
                               @click="handleDelete(scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
</div>
</body>
<script th:src="@{/static/js/axios.min.js}"></script>
<script th:src="@{/static/js/request.js}"></script>
<script th:src="@{/static/js/common.js}"></script>
<script th:src="@{/static/api/admin/sysArticleCategory.js}"></script>
<script th:src="@{/static/js/vue.min.js}"></script>
<script th:src="@{/static/element/index.js}"></script>
<script th:src="@{/static/js/jquery.min.js}"></script>
<script th:src="@{/static/layer/layer.js}"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                tableData: [],
                button: {
                    add: true,
                    update: false,
                    delete: false
                },
                // 重新渲染表格的状态
                refreshTable: true,
                expandName: "展开",
                expandStatus: false,
                loading: false,
                queryForm: {
                    categoryName: ''
                }
            }
        },
        created() {
            this.handleQuery();
            let sysButtons = JSON.parse(localStorage.getItem("mars-sysButtons"));
            this.button.add = sysButtons.indexOf("admin/sysArticleCategory/add") > -1;
            this.button.update = sysButtons.indexOf("admin/sysArticleCategory/update") > -1;
            this.button.delete = sysButtons.indexOf("admin/sysArticleCategory/delete") > -1;

        },
        methods: {
            expandTable() {
                this.expandStatus = !this.expandStatus
                this.expandName = "折叠"
                this.refreshTable = false;
                this.$nextTick(() => {
                    this.refreshTable = true;
                });
            },
            resetQuery() {
                this.queryForm = {}
                this.handleQuery()
            },
            handleQuery() {
                let queryParam = {
                    categoryName: this.queryForm.categoryName
                };
                this.loading = true
                pageList(queryParam).then((res) => {
                    if (res.code === '200') {
                        this.loading = false
                        this.tableData = res.data;
                    }
                });
            },
            handleDelete(row) {
                deleteById('/admin/sysArticleCategory/delete/' + row.id, this);
            },

            handleAdd(row) {
                if (row.id) {
                    openPage('新增分类', '/admin/sysArticleCategory/sysArticleCategoryAdd.html?parentId=' + row.id,
                        this);
                } else {
                    openPage('新增分类', '/admin/sysArticleCategory/sysArticleCategoryAdd.html', this);
                }
            },
            handleUpdate(row) {
                openPage('修改分类', '/admin/sysArticleCategory/sysArticleCategoryUpdate.html?id=' + row.id, this);
            }
        }
    });
</script>
</html>